<template>
    <div class="body">
        <el-col class="main">
            <el-col class="mtitle">
                &nbsp;&nbsp;<el-button type="primary" size="small" icon="arrow-left" @click="backmain()"></el-button>
                <span style="font-size:25px;color:#555 "></span>
            </el-col>
            <el-col class="mbody" id="message">
                <div v-for="item in msglist" :class="isrl(item.type)">
                    <div class="mtime">{{item.time | totime}}</div>
                    <br>
                    <div class="msg">{{item.data}}</div>
                    <br>
                </div>


            </el-col>
            <el-col class="mbottom">
                <div class="text">
                    <textarea  contenteditable="true" class="tedit" v-model="msg" placeholder="请输入要发送的消息"></textarea>
                </div>
                <button class="btn" @click="sendms()">发送</button>
            </el-col>
        </el-col>
        <!--调用computerd监控连接状态和消息列表-->
        <div>{{flashmsg}}{{routermain}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msglist: [{
                    time: 111111,
                    data: '这是消息',
                    type: 're',
                    state: '0'
                }],
                msg: ''
            }
        },
        methods: {
            /**
             * 发送消息*/
            sendms() {
                let data = {
                    type: 'message',
                    data: this.msg,
                    to: this.$route.params.uid
                }
                this.$store.state.ws.send(JSON.stringify(data))
                this.msg = ''
//                let message = window.document.getElementById("message")
//                message.scrollTop = message.scrollHeight + 1000

            },
            isrl(n) {
                return n === 'se' ? 'r' : 'l'
            }, backmain() {
                this.$router.replace('/main')
            }
        },
        computed: {
            routermain: function () {
                let message
                if (this.$store.state.wsst !== 2) {
                    this.$router.push('/login')
                }
                return ''

            },
            /**
             * 刷新消息
             * */
            flashmsg() {
                let ulist = this.$store.state.ulist
                let uid = this.$route.params.uid
                let mlist = []
                ulist.forEach((val) => {
                    if (val.fuid === uid) {
                        val.msg.forEach((v1) => {
                            mlist.push({
                                time: v1.time,
                                data: v1.msg,
                                state: v1.state,
                                type: v1.from === uid ? 're' : 'se'
                            })
                        })

                    }
                })
                this.msglist = mlist
                return ''

            }
        },
        updated:function () {
            let message = window.document.getElementById("message")
            message.scrollTop = message.scrollHeight
        }
    }
</script>
<style scoped>

    .body {
        height: 100%;
        background: rgba(0, 0, 0, .3);
    }

    .icon img {
        width: 100%;
        height: 100%;
    }

    .main {
        background: #ddd;
        position: relative;
        width: 400px;
        height: 660px;
        margin-left: -300px;
        left: 50%;
        margin-top: -320px;
        top: 50%;
    }

    .mbody::-webkit-scrollbar {
        width: 6px;
    }

    .mbody::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #E9E9E9;
    }

    .mbody {
        padding-top: 40px;
        margin-top: -40px;
        overflow-x: auto;
        height: 100%;
        padding-bottom: 60px;
        margin-bottom: -60px;
    }

    .mtitle {
        background: #eef1f6;
        position: relative;
        height: 40px;
        z-index: 10;
        padding: 0;
    }

    .mbottom {
        background: #ddd;
        position: relative;
        z-index: 10;
        height: 60px;
    }

    .text {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        padding: 0px;
        padding-right: 65px;
        margin-right: -66px;
        position: relative;
    }

    .tedit {
        display: inline-block;
        resize: none;/*禁止改变大小*/
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        font-size: 22px;
        line-height: 30px;
        overflow: auto;
        padding: 0 3px;
        margin-right: -70px;
        background: white;
        outline: -webkit-focus-ring-color auto 5px;
    }
/*滚动条样式*/
    .tedit::-webkit-scrollbar {
        width: 3px;
    }

    .tedit::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: rgba(0, 0, 0, .6);
    }

    .btn {
        width: 61px;
        color: #fff;
        background-color: #20a0ff;
        border-color: #20a0ff;
        display: inline-block;
        line-height: 55px;
        white-space: nowrap;
        cursor: pointer;
        margin: 0;
        font-size: 14px;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        outline: 0;
        text-align: center;
        position: relative;
        top: -24px;
    }

    .r {
        text-align: right;
    }

    .r .msg {
        background: #13ce66;
    }

    .l {
        text-align: left;
    }

    .l .msg {
        background: #fff;
    }

    .mtime {
        margin: 0 13px;
        display: inline-block;

    }

    .msg {

        border-radius: 17px;
        margin: 5px 13px 13px;
        display: inline-block;
        font-size: 26px;
        line-height: 30px;
        padding: 10px 15px;

    }
    .edit{

    }

    @media (orientation: Portrait) {
        .main {
            position: fixed;
            width: 100%;
            height: 100%;
            margin: 0;
            left: 0;
            top: 0;
        }

        .mbody {
            height: 100%;
        }
    }

    @media (max-width: 768px) {
        .main {
            position: fixed;
            width: 100%;
            height: 100%;
            margin: 0;
            left: 0;
            top: 0;
        }

        .mbody {
            height: 100%;
        }

    }

    @media (min-width: 768px) {

    }

    @media (min-width: 992px) {

    }

    @media (min-width: 1200px) {

    }
</style>